<template>
	<view>
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control style="font-size: 10rpx;" :current="currentTab" :values="items"
				:style-type="styleType" :active-color="activeColor" @clickItem="onClickItem" />
		</view>
		<view class="content">
			<view v-if="current === 0">
				<view v-if="postList.length == 0">
					<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
					</u-empty>
				</view>
				<view v-for="(item, index) in postList" :key="index">
					<view class="u-page">
						<view class="u-demo-block">
							<view class="u-demo-block__content">
								<view class="album">
									<view class="album__avatar" @click="gotoContent(item)">
										<image :src="item.avatar" mode="" style="width: 32px;height: 32px;">
										</image>
									</view>
									<view class="album__content">
										<view style="position: absolute;padding-left: 120rpx; padding-top: 10rpx;">
										</view>
										<view>
											<u--text :text="item.nickname" type="primary" bold size="17"
												@click="gotoContent(item)">
											</u--text>
											<u-icon :name="item.gender == '男'?'man':'woman'" color="red"></u-icon>
										</view>

										<view style="padding-top: 20rpx;color: #aaabbb;" @click="gotoContent(item)">
											<view style="position: absolute; font-size: 25rpx;padding-left: 32rpx;">
												{{item.postAddress}}
											</view>
											<u-icon name="map">{{item.postAddress}}</u-icon>
										</view>
										<u--text margin="20px 0px 8px 0" :text="item.postContent"
											@click="gotoContent(item)"></u--text>
										<u-album :urls="item.picture"></u-album>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view
						style="padding-left: 120rpx; padding-right: 430rpx; padding-top: 10rpx; padding-bottom: 10rpx;">
						<u-tag :text="item.tagList.name" type="warning" icon="tags"></u-tag>
					</view>
					<view style="padding-left: 88rpx;">
						<view
							style="position: absolute; font-size: 25rpx; padding-left: 535rpx; padding-top: 17rpx; color: #aaaaaa;"
							@click="actThumbPost(item)">
							({{item.thumbNum}})</view>
						<view style="position: absolute; padding-left: 500rpx; padding-top: 20rpx;">
							<u-icon v-if="item.thumbList.indexOf(userId) === -1" color="red" name="heart"
								@click="actThumbPost(item)"></u-icon>
							<u-icon v-if="item.thumbList.indexOf(userId) !== -1" color="red" name="heart-fill"
								@click="actThumbPost(item)"></u-icon>
						</view>
					</view>
					<view
						style="padding-left: 450rpx; position: absolute; padding-top: 17rpx; width: 10%; z-index: 9999;"
						@click="gotoContent(item)">
						<image style="position: absolute; width: 45rpx; height: 40rpx; padding-left: 30rpx;"
							src="../../static/reply.png">
						</image>
						<!-- <view style="padding-left: 50rpx; font-size: 20rpx; color: #aaabbb;">评论</view> -->
					</view>
					<view style="font-size: 30rpx; color: #cccbbb; padding-left: 80rpx; padding-top: 10rpx;">
						{{item.createTime}}
					</view>
					<view class="dividerThin"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 0,
				postList: [],
				list: [],
				items: ['全部'],
				current: 0,
				colorIndex: 0,
				activeColor: '#007aff',
				styleType: 'button',
				currentId: '',
				userId: '',
			}
		},
		onPullDownRefresh() {
			let that = this;
			that.userId = uni.getStorageSync("userId");
			that.$ajax(that.$url.searchTag, "GET", null, function(resp) {
				that.list = resp.data.result;
				for (var i = 0; i < that.list.length; i++) {
					that.items[i + 1] = that.list[i].name
				}
			})
			that.currentTab = query.current;
			that.currentId = query.currentId;
			that.loadPost();
			setTimeout(()=>{
				uni.stopPullDownRefresh();
			}, 800)
		},
		onLoad(query) {
			let that = this;
			that.userId = uni.getStorageSync("userId");
			that.$ajax(that.$url.searchTag, "GET", null, function(resp) {
				that.list = resp.data.result;
				for (var i = 0; i < that.list.length; i++) {
					that.items[i + 1] = that.list[i].name
				}
			})
			that.currentTab = query.current;
			that.currentId = query.currentId;
			that.loadPost();
		},
		methods: {
			gotoContent(item) {
				uni.navigateTo({
					url: '/pages/post_content/post_content?postId=' + item.id
				})
			},
			actThumbPost(item) {
				let that = this;
				that.$ajax(that.$url.actThumbPost + "?postId=" + item.id, "GET", null, function(resp) {
					that.isThumb = resp.data.result
					if (that.isThumb == false) {
						uni.showToast({
							icon: 'none',
							title: '取消点赞'
						})

					} else {
						uni.showToast({
							icon: 'none',
							title: '成功点赞'
						})
					}
					that.loadPost(that);
				})
			},
			loadPost() {
				let that = this;
				that.$ajax(that.$url.searchPostByTag + "?classId=" + that.currentId, "GET", null, function(resp) {
					that.postList = resp.data.result;
				})
			},
			onClickItem(e) {
				let that = this;
				that.postList = [];
				that.currentTab = e.currentIndex;
				if (e.currentIndex == 0) {
					that.currentId = ''
				} else {
					that.currentId = that.list[e.currentIndex - 1].id;
				}
				that.loadPost();
			},
		}
	}
</script>


<style lang="scss">
	u-page {
		padding-top: 400rpx;
	}

	/* 分割线样式 */
	.divider {
		margin-top: 30rpx;
		height: 10px;
		/* 设置分割线高度 */
		background-color: #eeeeee;
		/* 设置分割线颜色为灰色 */
	}

	.dividerThin {
		margin-top: 30rpx;
		height: 5px;
		/* 设置分割线高度 */
		background-color: #eeeeee;
		/* 设置分割线颜色为灰色 */
	}

	.album {
		padding: 20rpx;
		padding-top: 50rpx;
		@include flex;
		align-items: flex-start;

		&__avatar {
			background-color: $u-bg-color;
			padding: 3px;
			border-radius: 300px;
		}

		&__content {
			margin-left: 10px;
			flex: 1;
		}
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 0;
	}

	.uni-common-mt {
		margin-top: 30px;
	}

	.uni-padding-wrap {
		// width: 750rpx;
		padding: 0px 30px;
	}

	.content {
		/* #ifndef APP-NVUE */
		// display: flex;
		/* #endif */
		// justify-content: center;
		// align-items: center;
		// height: 150px;
		// text-align: center;
	}

	.content-text {
		font-size: 14px;
		color: #666;
	}

	.color-tag {
		width: 25px;
		height: 25px;
	}

	.uni-list {
		flex: 1;
	}

	.uni-list-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex: 1;
		flex-direction: row;
		background-color: #FFFFFF;
	}


	.uni-list-item__container {
		padding: 12px 15px;
		width: 100%;
		flex: 1;
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		box-sizing: border-box;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom-style: solid;
		border-bottom-width: 1px;
		border-bottom-color: #eee;
	}

	.uni-list-item__content-title {
		font-size: 14px;
	}
</style>